<template>
	<div class="part">
	    <span>数据来源于vdr</span>
		<h2>YTD超时</h2>
		<div ref="overTimeCountryChart" style="width:100%;height:20rem"></div>
		<div class="mt30" ref="overTimePersonalChart" style="width:100%;height:20rem"></div>
	</div>
</template>
<script type="text/javascript">
	import echarts from 'echarts'
	export default{
		mounted(){
			this.getOverTimeCountryData();
			this.getOverTimePersonalData();
		},
		methods:{
			//超时
			getOverTimeCountryData(){
				let overTimeCountryChart = echarts.init(this.$refs.overTimeCountryChart);
				this.$http.get(this.$parent.overTimeCountryUrl,{emulateJSON:true})
				.then((response) => {
					// console.log(response);
					if(response){
						this.$parent.overTimeCountryOption.yAxis.data = response.data[0].type;
						this.$parent.overTimeCountryOption.series[0].data = response.data[0].data[0];
						/*this.$nextTick(function(){
							overTimeCountryChart.setOption(this.overTimeCountryOption);
						})*/
						overTimeCountryChart.setOption(this.$parent.overTimeCountryOption);
					}
				})
			},
			getOverTimePersonalData(){
				let overTimePersonalChart = echarts.init(this.$refs.overTimePersonalChart)
				this.$http.get(this.$parent.overTimePersonalUrl,{emulateJSON:true})
				.then((response) => {
					 console.log(response.data);
					if(response.data){
						// console.log(response.data[0].data[0].length);
						console.log(this.$parent)
						// console.log(response.data[0].type[0]);
						let dataLen = response.data[0].data[0].length;
						this.$parent.overTimePersonalOption.xAxis.data[dataLen-1] = response.data[0].type[0];

						// this.$parent.overTimePersonalOption.xAxis.data = response.data[0].type;

						this.$parent.overTimePersonalOption.series.data = response.data[0].data[0];

						// this.$parent.overTimePersonalOption.tooltip.formatter = function(params){
						// 	return "WTD超时:"+ params.value + "次";
						// };
						// this.$parent.overTimePersonalOption.tooltip.formatter= function(params){
						// 	return "超时次"
						// 	// console.log(params);
						// }

						overTimePersonalChart.setOption(this.$parent.overTimePersonalOption);

						// overTimePersonalChart.on("click",function(params){
						// 	console.log(params);

						// })
					}
				})
			}
		}
	}
</script>